<template>
    <view class="container">
        <view class="carousel">
            <swiper indicator-dots circular=true                  duration="400">
                <swiper-item class="swiper-item" v-for="(item,index) in gallery" :key="index">
                    <view class="image-wrapper">
                        <image
                                :src="item.image_url"
                                class="loaded"
                                mode="aspectFill"
                        ></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <view class="introduce-section">
            <text class="title">{{goodsInfo.goods_name}}</text>
            <view class="price-box">
                <text class="price">{{price}}</text>
                <text class="m-price">¥{{goodsInfo.market_price}}</text>
                <text class="coupon-tip">{{discount}}折</text>
            </view>
            <view class="bot-row">
                <text>销量: {{goodsInfo.sales_sum}}</text>
                <text>库存: {{stock}}</text>
            </view>
        </view>

        <!--  分享 -->
        <view class="share-section" @click="share">
            <text class="tit">分享给好友吧</text>
            <text class="yticon icon-bangzhu1"></text>
            <view class="share-btn">
                立即分享
                <text class="yticon icon-you"></text>
            </view>

        </view>

        <view class="c-list">
            <view class="c-row b-b" @click="toggleSpec" v-if="!empty">
                <text class="tit">购买类型</text>
                <view class="con">
                    <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                        {{sItem.name}}
                    </text>
                </view>
                <text class="yticon icon-you"></text>
            </view>
            <view class="c-row b-b">
                <text class="tit">促销活动</text>
                <view class="con-list">
                    <text v-for="(fitem,findex) in levels" :key="findex">{{fitem.level_name}}-折扣-{{fitem.discount}}
                    </text>
                </view>
            </view>
            <view class="c-row b-b">
                <text class="tit">服务</text>
                <view class="bz-list con">
                    <text>7天无理由退换货 ·</text>
                    <text>假一赔十 ·</text>
                </view>
            </view>
        </view>

        <!-- 评价 -->
        <view class="eva-section">
            <view class="e-header">
                <text class="tit">评价</text>
                <text>({{comment.length}})</text>
                <text class="yticon icon-you"></text>
            </view>
            <view class="eva-box" v-for="item,index in comment" :key="index">
                <view class="right">
                    <text class="name">{{item.username}}</text>
                    <text class="con">{{item.content}}</text>
                    <view class="bot">
                        <text class="time">{{formatTime(item.add_time)}}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="detail-desc">
            <view class="d-header">
                <text>图文详情</text>
            </view>
            <u-parse :content="goodsInfo.goods_content"></u-parse>
            <!--<rich-text :nodes="goodsInfo.goods_content"></rich-text>-->
        </view>

        <!-- 底部操作菜单 -->
        <view class="page-bottom">
            <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
                <text class="yticon icon-xiatubiao--copy"></text>
                <text>首页</text>
            </navigator>
            <navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
                <text class="yticon icon-gouwuche"></text>
                <text>购物车</text>
            </navigator>
            <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
                <text class="yticon icon-shoucang"></text>
                <text>收藏</text>
            </view>

            <view class="action-btn-group">
                <button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
                <button type="primary" class=" action-btn no-border add-cart-btn" @click="doaddcart()">加入购物车</button>
            </view>
        </view>


        <!-- 规格-模态层弹窗 -->
        <view
                class="popup spec"
                :class="specClass"
                @touchmove.stop.prevent="stopPrevent"
                @click="toggleSpec"
        >
            <!-- 遮罩层 -->
            <view class="mask"></view>
            <view class="layer attr-content" @click.stop="stopPrevent">
                <view class="a-t">
                    <image :src="src"></image>
                    <view class="right">
                        <text class="price">{{price}}</text>
                        <text class="stock">库存：{{stock}}</text>
                        <view class="selected">
                            已选：
                            <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                                {{sItem.name}}
                            </text>
                        </view>
                    </view>
                </view>
                <view v-for="(item,index) in specList" :key="index" class="attr-list">
                    <text>{{item.name}}</text>
                    <view class="item-list">
                        <text
                                v-for="(childItem, childIndex) in specChildList"
                                v-if="childItem.pid === item.id"
                                :key="childIndex" class="tit"
                                :class="{selected: childItem.selected}"
                                @click="selectSpec(childIndex, childItem.id)"
                        >
                            {{childItem.name}}
                        </text>
                    </view>
                </view>
                <button class="btn" @click="toggleSpec">完成</button>
            </view>
        </view>
        <!-- 分享 -->
        <share
                ref="share"
                :contentHeight="580"
                :shareList="shareList"
        ></share>
    </view>
</template>

<script>
  import share from '@/components/share'
  import { parseTime } from '@/utils/index'
  import {
    mapMutations,
  } from 'vuex'
  import {
    getGoodsList,
    getGoodsListNew,
    getGoodsListRecommand,
    goodsCategoryList,
    searchGoods,
    goodsInfo,
  } from '@/api/goods'
  import uParse from '@/components/u-parse/u-parse.vue'

  export default {
    components: {
      share,
      uParse,
    },
    data () {
      return {
        specClass: 'none',
        specSelected: [],
        gallery: [],
        favorite: false,
        goodsInfo: {sales_sum:999,goods_name:'默认商品',market_price:0},
        goodsId: 0,
        levels: [],
        src: '',
        stock: '',
        price: 0,
        discount: 0,
        shareList: [],
        comment: [],
        filter_spec: [],
        specListprice: [],
        specList: [],
        empty: false,
        specChildList: [],
      }
    },
    watch: {
      //显示空白页
      specList (e) {
        let empty = e.length === 0 ? true : false
        if (this.empty !== empty) {
          this.empty = empty
        }
      },
    },
    //下拉刷新
    onShareAppMessage(res) {
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: this.goodsInfo['goods_name']+"【趣奇市场】",
        content:this.goodsInfo['goods_name']+"【趣奇市场】",
        path: '/pages/product/product?id='+this.goodsId
      }
    },
    onPullDownRefresh () {
      this.loadData()
    },
    async onLoad (options) {

      //接收传值,id里面放的是标题，因为测试数据并没写id
      let id = options.id
      this.goodsId = id
      if (this.server._isEmpty(id) || parseInt(id) < 0) {
        this.server.msg('商品不存在')
        return
      }
      await this.loadData()
    },
    methods: {
      //规格弹窗开关
      ...mapMutations(['addCart']),

      async loadData () {
        console.log(this.server.getSystem())
        uni.showLoading({
          title: '正在加载',
        })
        let data = (await goodsInfo({id: this.goodsId})).result
        console.log(data)
        if (this.server._isEmpty(data) || this.server._isEmpty(data.goods)) {
          this.server.msg('商品不存在')
          return
        }
        this.goodsInfo = data.goods
        uni.setNavigationBarTitle({title: this.goodsInfo.goods_name})
        this.gallery = data.gallery
        this.comment = data.comment
        this.specListprice = data.spec_goods_price
        this.filter_spec = data.filter_spec
        this.levels = data.levels
        this.specList = data.specList
        this.specChildList = data.specChildList
        this.price = this.goodsInfo.price
        this.stock = this.goodsInfo.store_count
        this.src = this.goodsInfo.original_img
        this.discount = this.goodsInfo.discount
        if (!this.comment instanceof Array || this.server._isEmpty(this.comment)) {
          this.comment = []
        }
        if (!this.levels instanceof Array || this.server._isEmpty(this.levels)) {
          this.levels = []
        }
        if (!this.filter_spec instanceof Array || this.server._isEmpty(this.filter_spec)) {
          this.filter_spec = []
        }
        if (!this.specList instanceof Array || this.server._isEmpty(this.specList)) {
          this.specList = []
        }
        //规格 默认选中第一条
        this.specList.forEach(item => {
          for (let cItem of this.specChildList) {
            if (cItem.pid === item.id) {
              this.price = cItem.price
              this.src = this.server._isEmpty(cItem.src) ? this.goodsInfo.original_img : cItem.src
              this.stock = cItem.store_count
              this.$set(cItem, 'selected', true)
              this.specSelected.push(cItem)
              break //forEach不能使用break
            }
          }
        })
        this.shareList = await this.$api.json('shareList')
        uni.hideLoading()
        uni.stopPullDownRefresh()
      },
      formatTime (time, format) {
        return parseTime(time, format)
      },
      doaddcart () {
        if (this.specList.length > 0 && this.specSelected.length <= 0) {
          this.server.msg('请选择商品规格')
          return
        }
        if (this.server._isEmpty(this.specSelected) || this.specSelected.length <= 0) {
          this.specSelected = []
          let cart_goods = {}
          cart_goods.type = 'single'
          cart_goods.id = this.goodsInfo.goods_id
          cart_goods.src = this.goodsInfo.original_img
          cart_goods.goods_name = this.goodsInfo.goods_name
          cart_goods.goods_id = this.goodsInfo.goods_id
          cart_goods.price = this.goodsInfo.shop_price
          cart_goods.selected = true
          cart_goods.store_count = this.goodsInfo.store_count
          this.specSelected.push(cart_goods)
        }
        //加入购物车，默认都是加1
        this.specSelected.forEach(item => {
          if(this.server._isEmpty(item.src)){
            item.src=this.goodsInfo.original_img
          }
          item.count = 1
        })
        this.addCart(this.specSelected)
      },
      toggleSpec () {
        if (this.specClass === 'show') {
          this.specClass = 'hide'
          setTimeout(() => {
            this.specClass = 'none'
          }, 250)
        } else if (this.specClass === 'none') {
          this.specClass = 'show'
        }
      },
      //选择规格
      selectSpec (index, id) {
        let list = this.specChildList
        list.forEach(item => {
          if (item.id === id) {
            this.price = item.price
            this.stock = item.store_count
            this.src = this.server._isEmpty(item.src) ? this.goodsInfo.original_img : item.src
          } else {
            this.$set(item, 'selected', false)
          }
        })

        this.$set(list[index], 'selected', true)
        //存储已选择
        /**
         * 修复选择规格存储错误
         * 将这几行代码替换即可
         * 选择的规格存放在specSelected中
         */
        this.specSelected = []
        list.forEach(item => {
          if (item.selected === true) {
            this.specSelected.push(item)
          }
        })

      },
      //分享
      share () {
        this.$refs.share.toggleMask()
      },
      //收藏
      toFavorite () {
        this.favorite = !this.favorite
      },
      buy () {
        if (this.specList.length > 0 && this.specSelected.length <= 0) {
          this.server.msg('请选择商品规格')
          return
        }
        if (this.server._isEmpty(this.specSelected) || this.specSelected.length <= 0) {
          this.specSelected = []
          let cart_goods = {}
          cart_goods.type = 'single'
          cart_goods.id = this.goodsInfo.goods_id
          cart_goods.src = this.goodsInfo.original_img
          cart_goods.goods_name = this.goodsInfo.goods_name
          cart_goods.goods_id = this.goodsInfo.goods_id
          cart_goods.price = this.goodsInfo.shop_price
          cart_goods.selected = true
          cart_goods.store_count = this.goodsInfo.store_count
          this.specSelected.push(cart_goods)
        }
        let goodsData = []
        this.specSelected.forEach(item => {
          if(this.server._isEmpty(item.src)){
            item.src=this.goodsInfo.original_img
          }
          item.count = 1
          if (item.selected) {
            goodsData.push(item)
          }
        })
        uni.navigateTo({
          url: `/pages/order/createOrder?data=${JSON.stringify({
            goodsData: goodsData,
          })}`,
        })
      },
      stopPrevent () {},
    },

  }
</script>

<style lang='scss'>
    page {
        background: $page-color-base;
        padding-bottom: 160upx;
    }

    .icon-you {
        font-size: $font-base + 2upx;
        color: #888;
    }

    .carousel {
        height: 722upx;
        position: relative;
        swiper {
            height: 100%;
        }
        .image-wrapper {
            width: 100%;
            height: 100%;
        }
        .swiper-item {
            display: flex;
            justify-content: center;
            align-content: center;
            height: 750upx;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }

    }

    /* 标题简介 */
    .introduce-section {
        background: #fff;
        padding: 20upx 30upx;

        .title {
            font-size: 32upx;
            color: $font-color-dark;
            height: 50upx;
            line-height: 50upx;
        }
        .price-box {
            display: flex;
            align-items: baseline;
            height: 64upx;
            padding: 10upx 0;
            font-size: 26upx;
            color: $uni-color-primary;
        }
        .price {
            font-size: $font-lg + 2upx;
        }
        .m-price {
            margin: 0 12upx;
            color: $font-color-light;
            text-decoration: line-through;
        }
        .coupon-tip {
            align-items: center;
            padding: 4upx 10upx;
            background: $uni-color-primary;
            font-size: $font-sm;
            color: #fff;
            border-radius: 6upx;
            line-height: 1;
            transform: translateY(-4upx);
        }
        .bot-row {
            display: flex;
            align-items: center;
            height: 50upx;
            font-size: $font-sm;
            color: $font-color-light;
            text {
                flex: 1;
            }
        }
    }

    /* 分享 */
    .share-section {
        display: flex;
        align-items: center;
        color: $font-color-base;
        background: linear-gradient(to left, #fdf5f6, #fbebf6);
        padding: 12upx 30upx;
        .share-icon {
            display: flex;
            align-items: center;
            width: 70upx;
            height: 30upx;
            line-height: 1;
            border: 1px solid $uni-color-primary;
            border-radius: 4upx;
            position: relative;
            overflow: hidden;
            font-size: 22upx;
            color: $uni-color-primary;
            &:after {
                content: '';
                width: 50upx;
                height: 50upx;
                border-radius: 50%;
                left: -20upx;
                top: -12upx;
                position: absolute;
                background: $uni-color-primary;
            }
        }
        .icon-xingxing {
            position: relative;
            z-index: 1;
            font-size: 24upx;
            margin-left: 2upx;
            margin-right: 10upx;
            color: #fff;
            line-height: 1;
        }
        .tit {
            font-size: $font-base;
            margin-left: 10upx;
        }
        .icon-bangzhu1 {
            padding: 10upx;
            font-size: 30upx;
            line-height: 1;
        }
        .share-btn {
            flex: 1;
            text-align: right;
            font-size: $font-sm;
            color: $uni-color-primary;
        }
        .icon-you {
            font-size: $font-sm;
            margin-left: 4upx;
            color: $uni-color-primary;
        }
    }

    .c-list {
        font-size: $font-sm + 2upx;
        color: $font-color-base;
        background: #fff;
        .c-row {
            display: flex;
            align-items: center;
            padding: 20upx 30upx;
            position: relative;
        }
        .tit {
            width: 140upx;
        }
        .con {
            flex: 1;
            color: $font-color-dark;
            .selected-text {
                margin-right: 10upx;
            }
        }
        .bz-list {
            height: 40upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            text {
                display: inline-block;
                margin-right: 30upx;
            }
        }
        .con-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            color: $font-color-dark;
            line-height: 40upx;
        }
        .red {
            color: $uni-color-primary;
        }
    }

    /* 评价 */
    .eva-section {
        display: flex;
        flex-direction: column;
        padding: 20upx 30upx;
        background: #fff;
        margin-top: 16upx;
        .e-header {
            display: flex;
            align-items: center;
            height: 70upx;
            font-size: $font-sm + 2upx;
            color: $font-color-light;
            .tit {
                font-size: $font-base + 2upx;
                color: $font-color-dark;
                margin-right: 4upx;
            }
            .tip {
                flex: 1;
                text-align: right;
            }
            .icon-you {
                margin-left: 10upx;
            }
        }
    }

    .eva-box {
        display: flex;
        padding: 20upx 0;
        .portrait {
            flex-shrink: 0;
            width: 80upx;
            height: 80upx;
            border-radius: 100px;
        }
        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: $font-base;
            color: $font-color-base;
            padding-left: 26upx;
            .con {
                font-size: $font-base;
                color: $font-color-dark;
                padding: 20upx 0;
            }
            .bot {
                display: flex;
                justify-content: space-between;
                font-size: $font-sm;
                color: $font-color-light;
            }
        }
    }

    /*  详情 */
    .detail-desc {
        background: #fff;
        margin-top: 16upx;
        .d-header {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80upx;
            font-size: $font-base + 2upx;
            color: $font-color-dark;
            position: relative;

            text {
                padding: 0 20upx;
                background: #fff;
                position: relative;
                z-index: 1;
            }
            &:after {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%);
                width: 300upx;
                height: 0;
                content: '';
                border-bottom: 1px solid #ccc;
            }
        }
    }

    /* 规格选择弹窗 */
    .attr-content {
        padding: 10upx 30upx;
        .a-t {
            display: flex;
            image {
                width: 170upx;
                height: 170upx;
                flex-shrink: 0;
                margin-top: -40upx;
                border-radius: 8upx;;
            }
            .right {
                display: flex;
                flex-direction: column;
                padding-left: 24upx;
                font-size: $font-sm + 2upx;
                color: $font-color-base;
                line-height: 42upx;
                .price {
                    font-size: $font-lg;
                    color: $uni-color-primary;
                    margin-bottom: 10upx;
                }
                .selected-text {
                    margin-right: 10upx;
                }
            }
        }
        .attr-list {
            display: flex;
            flex-direction: column;
            font-size: $font-base + 2upx;
            color: $font-color-base;
            padding-top: 30upx;
            padding-left: 10upx;
        }
        .item-list {
            padding: 20upx 0 0;
            display: flex;
            flex-wrap: wrap;
            text {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #eee;
                margin-right: 20upx;
                margin-bottom: 20upx;
                border-radius: 100upx;
                min-width: 60upx;
                height: 60upx;
                padding: 0 20upx;
                font-size: $font-base;
                color: $font-color-dark;
            }
            .selected {
                background: #fbebee;
                color: $uni-color-primary;
            }
        }
    }

    /*  弹出层 */
    .popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99;

        &.show {
            display: block;
            .mask {
                animation: showPopup 0.2s linear both;
            }
            .layer {
                animation: showLayer 0.2s linear both;
            }
        }
        &.hide {
            .mask {
                animation: hidePopup 0.2s linear both;
            }
            .layer {
                animation: hideLayer 0.2s linear both;
            }
        }
        &.none {
            display: none;
        }
        .mask {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .layer {
            position: fixed;
            z-index: 99;
            bottom: 0;
            width: 100%;
            min-height: 40vh;
            border-radius: 10upx 10upx 0 0;
            background-color: #fff;
            .btn {
                height: 66upx;
                line-height: 66upx;
                border-radius: 100upx;
                background: $uni-color-primary;
                font-size: $font-base + 2upx;
                color: #fff;
                margin: 30upx auto 20upx;
            }
        }
        @keyframes showPopup {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes hidePopup {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes showLayer {
            0% {
                transform: translateY(120%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        @keyframes hideLayer {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(120%);
            }
        }
    }

    /* 底部操作菜单 */
    .page-bottom {
        position: fixed;
        left: 30upx;
        bottom: 30upx;
        z-index: 95;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 690upx;
        height: 100upx;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
        border-radius: 16upx;

        .p-b-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: $font-sm;
            color: $font-color-base;
            width: 96upx;
            height: 80upx;
            .yticon {
                font-size: 40upx;
                line-height: 48upx;
                color: $font-color-light;
            }
            &.active, &.active .yticon {
                color: $uni-color-primary;
            }
            .icon-fenxiang2 {
                font-size: 42upx;
                transform: translateY(-2upx);
            }
            .icon-shoucang {
                font-size: 46upx;
            }
        }
        .action-btn-group {
            display: flex;
            height: 76upx;
            border-radius: 100px;
            overflow: hidden;
            box-shadow: 0 20upx 40upx -16upx #fa436a;
            box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
            background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
            margin-left: 20upx;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 50%;
                transform: translateY(-50%);
                height: 28upx;
                width: 0;
                border-right: 1px solid rgba(255, 255, 255, .5);
            }
            .action-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 180upx;
                height: 100%;
                font-size: $font-base;
                padding: 0;
                border-radius: 0;
                background: transparent;
            }
        }
    }

</style>
